<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>新增材料信息</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/addr-page.css">
    <link rel="stylesheet" href="../../css/vant.css">
</head>
<style>
    .submit-meterial {
        width: 180px;
        margin: 32px auto;
    }

    .count-pop-container {
        padding: 16px;
    }

    .count-pop-container .top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .count-pop-container .top .title {
        font-size: 16px;
        color: #111A34;
    }

    .count-pop-container .top .confirm {
        font-size: 14px;
        color: #3F8CEC;
    }

    .count-pop-container .middle {
        margin-top: 26px;
    }

    .count-pop-container .middle .van-cell::after {
        border-bottom: none;
    }

    .count-pop-container .van-field__label {
        width: 0px;
        margin-right: 0;
    }

    .count-pop-container .van-field__control {
        background: #EFEFEF;
        height: 40px;
        border-radius: 20px;
        padding-left: 16px;
    }

    .count-pop-container .bottom {
        padding-top: 16px;
    }

    .count-pop-container .bottom .unit {
        display: inline-block;
        width: 60px;
        height: 32px;
        font-size: 14px;
        color: #666666;
        line-height: 32px;
        text-align: center;
        background: #F7F7F7;
        border-radius: 16px;
        margin-right: 10px;
    }

    .count-pop-container .bottom .unit-select {
        color: #3F8CEC;
        background: #FFFFFF;
        border: 1px solid #3F8CEC;
    }

    .count-pop-container .unit-container {
        padding-top: 10px;
    }
</style>

<body>
    <div class="app" v-cloak>
        <header>
            <div class="flex-x-sb ">
                <span class="iconfont goback" @click="backPage">&#xe66f;</span>
                <div class="title">填写材料信息</div>
            </div>
        </header>

        <div style="margin-top: 88px;" class="dizhitianjia">
            <van-form :validate-first="true" :show-error-message="false" @submit="submitInfo">
                <template>
                    <vant-row>
                        <vant-col>
                            <van-field v-model="applyForm.categoryName" label="*分类" readonly format-trigger="onChange"
                                placeholder="请选择" :rules="[{ required: true, message: '请选择' }]" @click="selectCategory">
                            </van-field>
                        </vant-col>
                    </vant-row>

                    <vant-row>
                        <vant-col>
                            <van-field v-model="applyForm.spec" label="规格" placeholder="请输入"
                                :rules="[{ message: '请输入' }]" />
                        </vant-col>
                    </vant-row>
                    <vant-row>
                        <vant-col>
                            <van-field v-model="applyForm.unitStr" label="*数量" readonly format-trigger="onChange"
                                placeholder="请选择" :rules="[{ required: true, message: '请选择' }]" @click="selectCount">
                            </van-field>
                        </vant-col>
                    </vant-row>
                    <vant-row>
                        </vant-col>
                        <vant-col>
                            <van-field maxlength="40" v-model="applyForm.price" label="价格" placeholder="不填写默认价格面议"
                                :rules="[{ required: false}]" />
                        </vant-col>
                    </vant-row>
                    <div>
                        <van-button class="submit-meterial" round block type="info" native-type="submit">保存</van-button>
                    </div>
                </template>
            </van-form>

            <van-popup v-model="showCountPop" position="bottom" :style="{ height: '40%',width:'100%' }">
                <div class="count-pop-container">
                    <div class="top">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/deformed/black_close_btn.png" alt="" width="20" height="20"
                            @click="closeCount()">
                        <span class="title">填写数量</span>
                        <span class="confirm" @click="confirmCount()">确定</span>
                    </div>

                    <div class="middle">
                        <div class="title">数量</div>
                        <van-field v-model="inputCount" maxlength="100" placeholder="请输入数量"
                            :rules="[{ required: true,message: '请输入数量'}]" type="number" />
                    </div>

                    <div class="bottom">
                        <div>单位</div>
                        <div class="unit-container">
                            <span class="unit" :class="currentUnit==0?'unit-select':''"
                                @click="selectUnit(0,'根')">根</span>
                            <span class="unit " :class="currentUnit==1?'unit-select':''"
                                @click="selectUnit(1,'吨')">吨</span>
                            <span class="unit" :class="currentUnit==2?'unit-select':''"
                                @click="selectUnit(2,'台')">台</span>
                        </div>
                    </div>
                </div>

            </van-popup>

        </div>

    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js "></script>
    <script src="../../script/restful.js "></script>
    <script src="../../script/businessCommon.js "></script>
    <script>
        apiready = function () {
            let vm = new Vue({
                el: ".app",
                data() {
                    return {
                        status: api.pageParam.status,
                        showCountPop: false,//显示价格弹窗
                        currentUnit: 0,//当前默认选中
                        currentUnitStr: '根',//当前默认选中

                        applyForm: {
                            categoryName: null,//品种
                            categoryId: null,//品种
                            spec: null,//规格
                            count: null,//数量
                            price: null,//价格
                            unitStr: null,
                            unit: null
                        },
                        inputCount: null
                    }
                },
                created() {
                },
                mounted() {
                    var header = $api.dom('header');
                    var headerH = $api.fixStatusBar(header);

                    if (api.pageParam.key.classId != null) {
                        var pushObj = api.pageParam.key
                        this.applyForm.categoryName = api.pageParam.formLabel.categoryName
                        this.applyForm.categoryId = pushObj.classId
                        this.applyForm.spec = pushObj.model
                        this.applyForm.count = pushObj.num
                        this.applyForm.unitStr = pushObj.num + pushObj.unit
                        this.applyForm.unit = pushObj.unit
                        this.applyForm.price = pushObj.price
                        this.inputCount = pushObj.num
                    }
                    var baidu = api.require('modulebaidumtj');
                    baidu.onPageStart({
                        pageName: '异型钢发布-添加材料信息'
                    })
                },
                methods: {
                    //提交确认
                    submitInfo() {
                        api.sendEvent({
                            name: 'add_meterial',
                            extra: {
                                meterialData: vm.applyForm,
                            }
                        })
                        setTimeout(() => {
                            vm.backPage();
                        }, 200);
                    },

                    backPage() {
                        api.closeWin();
                    },

                    //选择数量弹窗
                    selectCount() {
                        this.showCountPop = true
                    },

                    //关闭数量弹窗
                    closeCount() {
                        this.showCountPop = false
                    },

                    //选择单位
                    selectUnit(value, str) {
                        this.currentUnit = value
                        this.currentUnitStr = str
                    },

                    //确定数量
                    confirmCount() {
                        this.applyForm.count = this.inputCount
                        this.applyForm.unit = this.currentUnit
                        this.applyForm.unitStr = this.applyForm.count + " " + this.currentUnitStr
                        this.showCountPop = false
                        console.log(this.applyForm.unitStr)
                    },

                    //选择分类
                    selectCategory() {
                        api.openWin({
                            name: 'select_category',
                            url: 'select_category.html',
                            bounces: false,
                            pageParam: {
                                key: 'value'
                            }
                        });
                    }
                }
            })

            api.addEventListener({
                name: 'selectCategory'
            }, function (ret) {
                vm.applyForm.categoryName = ret.value.name
                vm.applyForm.categoryId = ret.value.id
            })
        }
    </script>
</body>

</html>